<%@ page contentType="text/html; charset=UTF-8" session="false" language="java" isELIgnored="false"%> 
<!DOCTYPE html>
<html>
<head>
      <!-- 全局js 和css包 -->
	  	 <%@ include file="/jsp/include/web/new/global.jsp" %>
	   <!-- 全局js 和css包 -->
    
        <meta charset="utf-8">
        <title>高等教育自学考试信息管理系统</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
	    <style>
	        .x-body,.layui-tab-content { padding: 0;}
	    </style>
</head>
<body>
<div class="x-body">
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <div class="layui-container">
                <div class="layui-row">
                    <div class="layui-col-md6">
                        <ul class="x-body-main-ul">
                            <li><span>通知</span></li>
                            <li>
                                <a href="javascript:void(0);">专业代码2010010新增待审核</a>
                                <label>2017-09-10</label>
                            </li>
                            <li>
                                <a href="javascript:void(0);">专业代码2010010新增待审核</a>
                                <label>2017-09-10</label>
                            </li>
                            <li>
                                <a href="javascript:void(0);">专业代码2010010新增待审核</a>
                                <label>2017-09-10</label>
                            </li>
                            <li>
                                <a href="javascript:void(0);">专业代码2010010新增待审核</a>
                                <label>2017-09-10</label>
                            </li>
                            <li>
                                <a href="javascript:void(0);">专业代码2010010新增待审核</a>
                                <label>2017-09-10</label>
                            </li>
                        </ul>
                    </div>
                    <div class="layui-col-md6">
                        <ul class="x-body-main-ul">
                            <li><span>公告</span></li>
                            <li>
                                <a href="javascript:void(0);">专业代码2010010新增待审核</a>
                                <label>2017-09-10</label>
                            </li>
                            <li>
                                <a href="javascript:void(0);">专业代码2010010新增待审核</a>
                                <label>2017-09-10</label>
                            </li>
                            <li>
                                <a href="javascript:void(0);">专业代码2010010新增待审核</a>
                                <label>2017-09-10</label>
                            </li>
                            <li>
                                <a href="javascript:void(0);">专业代码2010010新增待审核</a>
                                <label>2017-09-10</label>
                            </li>
                            <li>
                                <a href="javascript:void(0);">专业代码2010010新增待审核</a>
                                <label>2017-09-10</label>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="layui-row">
                    <div class="layui-col-md6">
                        <ul class="x-body-main-ul">
                            <li><span>过渡期提醒</span></li>
                            <li>
                                <a href="javascript:void(0);">专业代码2010010新增待审核</a>
                                <label>2017-09-10</label>
                            </li>
                            <li>
                                <a href="javascript:void(0);">专业代码2010010新增待审核</a>
                                <label>2017-09-10</label>
                            </li>
                            <li>
                                <a href="javascript:void(0);">专业代码2010010新增待审核</a>
                                <label>2017-09-10</label>
                            </li>
                            <li>
                                <a href="javascript:void(0);">专业代码2010010新增待审核</a>
                                <label>2017-09-10</label>
                            </li>
                            <li>
                                <a href="javascript:void(0);">专业代码2010010新增待审核</a>
                                <label>2017-09-10</label>
                            </li>
                        </ul>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-row">
                            <div class="layui-col-md6">
                                <div class="x-body-main-ul-1" style='height: 180px; width: 90%;' id="main-1">
                                </div>
                            </div>
                            <div class="layui-col-md6">
                                <div class="x-body-main-ul-1" style='height: 180px; width: 90%;' id="main-2">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>
<script>
    layui.use(['laydate','element','laypage','layer'], function(){
        $         = layui.jquery;  // jquery
        laydate   = layui.laydate; // 日期插件
        lement    = layui.element; // 面包导航
    });
</script>
<script>
    var myChart = echarts.init(document.getElementById('main-1'));

    var option = {
        title: {
            text: '专业规范情况',
            left: 'center',
            bottom : 0,
            textStyle: {
                fontSize: 12
            }
        },
        color: ['#0099FA'],
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '30',
            top: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['过渡期', '统考', '学考过渡', '其他'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'数值',
                type:'bar',
                barWidth: '18',
                itemStyle:{
                    normal:{
                        color: function (params){
                            var colorList = ['#0099FA','#56BD5B','#F7B422','#E34C4C'];
                            return colorList[params.dataIndex];
                        }
                    }
                },
                data:[650, 1600, 1820, 334]
            }
        ]
    };

    myChart.setOption(option);

    var myChart2 = echarts.init(document.getElementById('main-2'));
    option2 = {
        title: {
            text: '课程情况',
            left: 'center',
            bottom : 0,
            textStyle: {
                fontSize: 12
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        color:['#0099FA','#56BD5B','#F7B422','#E34C4C'],
        legend: {
            orient: 'horizontal',
            bottom : 20,
            textStyle: {
                fontSize: 12
            },
            data:['课程一','课程二','课程三','课程四']

        },
        series: [
            {
                name:'访问来源',
                type:'pie',
                radius: ['30%', '50%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '12',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:600, name:'课程一'},
                    {value:310, name:'课程二'},
                    {value:234, name:'课程三'},
                    {value:135, name:'课程四'}
                ]
            }
        ]
    };
    myChart2.setOption(option2);
</script>
</body>
</html>